/**
 * Created by wuli等等 on 2017/2/26.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
} from 'react-native';


import Icon from 'react-native-vector-icons/FontAwesome';
import TabNavigator from 'react-native-tab-navigator';
import MyScene from '../scenes/MyScene';
import DriverInfo from '../shipper/DriverInfo';
import NavigatorDemo from '../scenes/NavigatorDemo';
import ModalView from '../scenes/ModalView';
import Publish from '../scenes/PublishChoose';
import User from '../shipper/User';

export default class UnderTab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: '我的', //默认页面为“首页”
            modalVisible: true
        }
    }

    setModalVisible(visible) {
        this.setState({modalVisible: visible});
    }


    render() {
        return (

                <TabNavigator tabBarStyle={styles.tabBar}>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '订单浏览'}
                        title="订单浏览"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name="eye" size={23}/>}
                        renderSelectedIcon={() => <Icon name="eye" size={23} color="#0767c8" />}
                        onPress={() => this.setState({selectedTab: '订单浏览'})}>
                        <DriverInfo name="张师傅"/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '消息'}
                        title="消息"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name="envelope" size={23}/>}
                        renderSelectedIcon={() => <Icon name="envelope" size={23} color="#0767c8" />}
                        onPress={() => this.setState({selectedTab: '消息'})}>
                        <MyScene/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '发布订单'}
                        title="发布订单"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name="plus" size={23}  />}
                        renderSelectedIcon={() => <Icon name="plus" size={23} color="#0767c8" />}
                        onPress={() => this.setState({selectedTab: '发布订单'})}>
                        <Publish/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '当前订单'}
                        title="当前订单"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name="bus" size={23} />}
                        renderSelectedIcon={() => <Icon name="bus" size={23} color="#0767c8" />}
                        onPress={() => this.setState({selectedTab: '当前订单'})}>
                        <MyScene />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '我的'}
                        title="我的"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name="user" size={23}  />}
                        renderSelectedIcon={() => <Icon name="user" size={23} color="#0767c8" />}
                        onPress={() => this.setState({selectedTab: '我的'})}>
                        <NavigatorDemo/>
                    </TabNavigator.Item>
                </TabNavigator>


        );
    }
}
let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#EDEDED'
    },
    tabBar:{
        backgroundColor:'#ffffff',
    },
    tabBarHidden:{

    },
    tabText: {
        color: "#727272",
        fontSize: 11
    },
    selectedTabText: {
        color: "#0767c8",
        fontSize: 11
    },
    tab:{
        borderTopWidth:1,
        borderColor:'#000000'
    },
    icon: {
        width: 23,
        height: 23
    },
});

